<link rel="stylesheet" href="./public/css/style.css">
<div class="headerBar">
    <div class="logo">
        <h1>L</h1>
    </div>
    <ul class="header-nav">
        <li class="active">在线商城</li>
        <li>坚果 Pro 3</li>
        <li>坚果 Pro 2S</li>
        <li>坚果 TNT 工作站</li>
        <li>Smartisan OS</li>
        <li>欢喜云</li>
        <li>应用</li>
        <li>论坛</li>
        <li>荣誉与奖项</li>
        <li>加入我们</li>
        <li>下载 APP</li>
    </ul>
    <div class="login">
        <div class="user"><a href="##"></a></div>
        <div class="car"><a href="##"></a></div>
    </div>
</div>
<div class="navBar">
    <div class="nav">
        <div class="nav-box">
            <ul class="nav-cont">
                <li class="home active"><a href="##">首页</a></li>
                <li class="phone"><a href="search/index.html">手机</a></li>
                <li class="clothes"><a href="##">服饰箱包</a></li>
                <li class="parts"><a href="##">官方配件</a></li>
                <li class="hotSale"><a href="##">抖音热销</a></li>
                <li class="breathing"><a href="##">畅呼吸</a></li>
                <li class="culture"><a href="##">抖音文创</a></li>
                <li class="sweep"><a href="##">扫地机器人</a></li>
                <li class="tnt"><a href="##">TNT显示屏</a></li>
                <li class="service"><a href="##">服务</a></li>
            </ul>
            <div class="nav-list-box">
                <div class="list-box detailed" data-for="phone">
                    <div class="list">
                        <img src="http://temp.im/126x126" alt="">
                        <p>商品名字</p>
                        <span>商品价格</span>
                    </div>
                    <div class="list">
                        <img src="http://temp.im/126x126" alt="">
                        <p>商品名字</p>
                        <span>商品价格</span>
                    </div>
                    <div class="list">
                        <img src="http://temp.im/126x126" alt="">
                        <p>商品名字</p>
                        <span>商品价格</span>
                    </div>
                </div>
                <div class="list-box classification" data-for="clothes">
                    <dl>
                        <dt>服饰</dt>
                        <dd>POLO衫</dd>
                        <dd>T恤</dd>
                        <dd>衬衣</dd>
                        <dd>衬衣</dd>
                    </dl>
                </div>
                <div class="list-box classification" data-for="parts">配件</div>
                <div class="list-box detailed" data-for="hotSale">热销</div>
                <div class="list-box classification" data-for="breathing">呼吸</div>
                <div class="list-box detailed" data-for="culture">文创</div>
                <div class="list-box detailed" data-for="sweep">扫地</div>
                <div class="list-box detailed" data-for="tnt">TNT</div>
                <div class="list-box classification" data-for="service">服务</div>
            </div>
        </div>
        <div class="search">
            <input type="text">
            <div class="tag">
                <p class="tag1">蓝牙耳机</p>
                <p class="tag2">移动电源</p>
            </div>
        </div>
    </div>
    <div class="loginBox"></div>
</div>
